<template>
	<div class="line">
		<vue-echart :options="option" class="charts-line" />
	</div>
</template>

<script>
import 'echarts/lib/chart/bar'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/legend'
import 'echarts/lib/component/grid'
import 'echarts/lib/component/dataZoom'
import LinearGradient from 'zrender/src/graphic/LinearGradient'
import ECharts from 'vue-echarts'
import baseUrl from '@/plugin/url'

export default {
	components: {
		VueEchart: ECharts
	},
	data() {
		return {
			option: {},
			xAxisData: [],
			remainData: [],
			parkData: []
		}
	},
	created() {
		this.getParkNum()
		this.option = {
			tooltip: {
				trigger: 'axis',
				axisPointer: {
					show: false,
					type: 'shadow'
				}
			},
			legend: {
				show: true,
				icon: 'roundRect',
				data: ['剩余数量', '已停数量'],
				top: -2,
				right: '10%',
				itemWidth: 23,
				itemHeight: 12,
				textStyle: {
					color: '#fff',
					fontSize: 14
				}
			},
			grid: {
				bottom: -5,
				left: -13,
				right: 13,
				top: 28,
				containLabel: true
			},
			xAxis: {
				show: false,
				type: 'category',
				data: this.xAxisData,
				boundaryGap: true,
				nameLocation: 'end',
				nameGap: 10,
				nameTextStyl: {
					color: '#ffffff',
					fontSize: 15
				},
				axisLine: {
					show: true,
					lineStyle: {
						color: '#ffffff'
					}
				},
				axisTick: {
					show: true,
					alignWithLabel: true,
					lineStyle: {
						color: '#7478cf'
					}
				},
				splitLine: {
					show: false
				}
			},
			dataZoom: [
				{
					type: 'inside'
				}
			],
			yAxis: {
				type: 'value',
				boundaryGap: true,
				nameGap: 10,
				axisLine: {
					show: false
				},
				axisTick: {
					show: false
				},
				labelLine: {
					show: false
				},
				axisLabel: {
					interval: 20
				},
				splitArea: {
					show: false
				},
				splitLine: {
					lineStyle: {
						type: 'dashed',
						color: '#7478cf'
					}
				}
			},
			series: [
				{
					name: '剩余数量',
					type: 'bar',
					data: this.remainData,
					barWidth: 15,
					itemStyle: {
						normal: {
							barBorderRadius: [2, 2, 0, 0],
							color: new LinearGradient(0, 0, 1, 0, [
								{
									offset: 0,
									color: '#26A15B'
								},
								{
									offset: 1,
									color: '#3d6950'
								}
							])
						}
					}
				},
				{
					name: '已停数量',
					type: 'bar',
					data: this.parkData,
					barWidth: 15,
					itemStyle: {
						normal: {
							barBorderRadius: [2, 2, 0, 0],
							color: new LinearGradient(0, 0, 1, 0, [
								{
									offset: 0,
									color: '#FBD437'
								},
								{
									offset: 1,
									color: '#72683e'
								}
							])
						}
					}
				}
			]
		}
	},
	methods: {
		getParkNum() {
			const url = baseUrl + '/web/api/v1/parking'
			this.$get(url).then(res => {
				res.data.forEach(resp => {
					this.xAxisData.push(resp.parkingName)
					this.remainData.push(resp.leavNum)
					this.parkData.push(resp.useNum)
				})
			})
		}
	}
}
</script>

<style lang="less" scoped>
.line {
	width: 100%;
	height: 100%;
	overflow: hidden;
}
.charts-line {
	width: 100%;
	height: 100%;
}
</style>
